<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <title>Add Page</title>
</head>
<body>
    <script type="text/javascript">
        function addPage() {
            
            var systemSelect = document.getElementById("systemSelect");
            var systemIndex = systemSelect.selectedIndex;
            var systemText = systemSelect.options[systemIndex].value;

            var modelSelect = document.getElementById("modelSelect");
            var modelIndex = modelSelect.selectedIndex;
            var modelText = modelSelect.options[modelIndex].value;

            var pageName = document.getElementById("pageNameInput").value;
            var pagePath = document.getElementById("pagePathInput").value;
            console.log(pageName, modelText,systemText);
            //请求参数
            var list = {
                "pageName": pageName,
                "modelID": modelText,
                "systemID": systemText,
                "pagePath":pagePath
            };
            console.log(list);
            //
            $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "http://127.0.0.1:8888/uitest/pages/add",
                //数据，json字符串
                data : JSON.stringify(list),
                //请求成功
                success : function(result) {
                    console.log("result");
                    console.log(result);
                    console.log("resultEnd");
                    window.location="http://127.0.0.1:8888/uitest/pagesPage";
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        }

        function getModels() {
            document.getElementById("modelSelect").options.length = 0;
            var systemSelect = document.getElementById("systemSelect");
            var systemIndex = systemSelect.selectedIndex;
            var systemText = systemSelect.options[systemIndex].value;
            console.log(systemIndex,systemSelect);
            //请求参数
			var list = {
                "systemID": systemText
            };
			//
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/json;charset=UTF-8",
				//请求地址
				url : "http://127.0.0.1:8888/uitest/models",
				//数据，json字符串
				data : JSON.stringify(list),
				//请求成功
				success : function(result) {
					console.log("result");
					console.log(result);
					console.log("resultEnd");
					for (var i = result.length - 1; i >= 0; i--) {
						modelId = result[i].id;
						modelName = result[i].model_name;
                        document.getElementById("modelSelect").options.add(new Option(modelName,modelId));
					}
				},
				//请求失败，包含具体的错误信息
				error : function(e){
					console.log(e.status);
					console.log(e.responseText);
				}
			});
        }

        window.onload = function getSystem(){
            // get systems
            $.ajax({
                //请求方式
                type : "GET",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "http://127.0.0.1:8888/uitest/systems",
                //数据，json字符串
                data : null,
                //请求成功
                success : function(result) {
                    console.log("result");
                    console.log(result);
                    console.log("resultEnd");

                    result.forEach(systemNameDic => {
                        var systemId = systemNameDic.id;
                        var systemName = systemNameDic.system_name;
                        document.getElementById("systemSelect").options.add(new Option(systemName,systemId));
                    });
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        }
    </script>
<div>
    <div style="text-align: center;">
        <h1>Add Page</h1>
    </div>
	
    <div id="system" style="text-align:left; margin-top: 50px; margin-left: 15%">
        System:<select id="systemSelect" onchange="getModels()">
            <option>              </option>
        </select>
    </div>
    <div id="models" style="text-align:left; margin-top: 50px; margin-left: 15%">
		Model:<select id="modelSelect">
        </select>
    </div>
    <div id="pageName" style="text-align:left; margin-top: 50px; margin-left: 15%">
		Page Name:<input id="pageNameInput" type="text" size="50px" name="pageName" placeholder="Please input pageName with string" />
    </div>
    <div id="pagePath" style="text-align:left; margin-top: 50px; margin-left: 15%">
		Page Path:<input id="pagePathInput" type="text" size="50px" name="pagePath" placeholder="Please input pagePath with string" />
    </div>
    
    <div id="addBtn" style="text-align:left; margin-top: 50px; margin-left: 15%">
		<button type="button" onclick="addPage()">Confirm</button>
    </div>
</div>

</body>
</html>